<!--
 * @Author: your name
 * @Date: 2021-01-11 16:27:27
 * @LastEditTime: 2021-01-13 15:01:43
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\pages\lenses\index.vue
-->
<template>
    <div class="lens_wrapper w1200auto">
        <bread-crumb class="mb10" :breadcrumbTtem="breadcrumbTtem"/>
        <div class="lens_banner relative">
            <img class="img" :src="require('@/assets/image/lenses/Lenses.png')" alt="">
            <div class="absolute lens_banner_box">
                <h3 class="mb10 size24 b lens_banner_title fff">{{$t('All about our lenses')}}</h3>
                <p class="mb10 size14 lens_banner_txt fff">{{$t("Here's everything you need to know")}}</p>
                <p class="mb10 size14 lens_banner_txt fff">{{$t('when choose your lenses-in the order')}}</p>
                <p class="mb10 size14 lens_banner_txt fff">{{$t("you'll need to know it when your order.")}}</p>
            </div>
        </div>
        <div class="lens_nav">
            <div class="lens_nav_items mb30 ptb30">
                <ul class="flex nav_item s7">
                    <li><nuxt-link :to="{path: '/collections/lenses', query: {id: 0}}"  class="block pb10 f777 gradients b size16 pointer" :class="{nav_active:currentIndex === '0'}">{{$t("Prescription types")}}</nuxt-link></li>
                    <li><nuxt-link :to="{path: '/collections/lenses/function', query: {id: 1}}" class="block pb10 f777 gradients b size16 pointer" :class="{nav_active:currentIndex === '1'}">{{$t("Lens Function")}}</nuxt-link></li>
                    <li><nuxt-link :to="{path: '/collections/lenses/lenIndex', query: {id: 2}}" class="block pb10 f777 gradients b size16 pointer" :class="{nav_active:currentIndex === '2'}">{{$t("Lens Index")}}</nuxt-link></li>
                    <li><nuxt-link :to="{path: '/collections/lenses/color', query: {id: 3}}" class="block pb10 f777 gradients b size16 pointer" :class="{nav_active:currentIndex === '3'}">{{$t("Lens Colors")}}</nuxt-link></li>
                </ul>
            </div>
        </div>
        <div class="lens_content">
            <nuxt-child></nuxt-child>
            <div class="mb80">
                <h2 class="size24 b text_c mb60">{{$t("Add These Lens to Any Pair of Glasses")}}</h2>
                <div class="s10 m0a flex lens_glasses">
                    <div class="">
                        <div class="mb10"><img :src="require('@/assets/image/lenses/The-lens_11.jpg')" alt=""></div>
                        <nuxt-link class="block text_c size16 b gradients" to="eyeglasses">{{$t("Eyeglasses")}}</nuxt-link>
                    </div>
                    <div class="">
                        <div class="mb10"><img :src="require('@/assets/image/lenses/The-lens_13.jpg')" alt=""></div>
                        <nuxt-link  class="block text_c size16 b gradients" to="sunglasses">{{$t("Sunglasses")}}</nuxt-link >
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import BreadCrumb from '~/components/common/Breadcrumb';
import { spliteParams } from '~/utils/Utils';
export default {
    async asyncData({route, query}) {
        let currentIndex = query && query.id;
        let arr = await spliteParams(route.fullPath);
        return {
            currentIndex: currentIndex,
            breadcrumbTtem: arr || []
        }
    },
    components: {
        BreadCrumb
    },
    watch: {
        $route(to, from) {
            if(to.fullPath !== from.fullPath) {
                this.currentIndex = to.query.id;
                this.breadcrumbTtem = spliteParams(to.fullPath);
            }
        }
    }
}
</script>

<style lang="scss">

</style>
